.post-header {
    .post-title {
        margin:     0;
        word-break: initial;
        overflow:   hidden;

        &:hover {
            text-decoration: none;
        }
    }
}

// Cover image displayed in single post view
// When post's `coverImage` variable is defined
.post-header-cover {
    display:                     table;
    position:                    relative;
    // Fix the cover image to the top of the page
    top:                         0;
    left:                        0;
    background-size:             cover;
    background-position:         center;
    background-repeat:           no-repeat;
    width:                       100%;
    padding:                     calc(#{map-get($header, 'height')} + 30px) 0 30px 0;
    // 100% minus header high, minus padding-top, minus padding bottom and minus 4px for perfect pixels
    height:                      100%;
    z-index:                     map-get($z-indexes, 'c-post-header-cover');
    // Sidebar animation
    // Transition style (push)
    transition:                  transform .25s ease-in-out;
    -webkit-transition:          -webkit-transform .25s ease-in-out;
    // Eliminate any flickering of elements while they are in a state of being animated
    -webkit-backface-visibility: hidden;
    -webkit-perspective:         1000;

    .post-header {
        display:        table-cell;
        vertical-align: middle;

        .post-title {
            max-width:     map-get($main-content, 'max-width');
            margin:        0 auto;
            color:         white;
            text-shadow:   0 2px 0 rgba(0, 0, 0, 0.9);
            margin-bottom: 20px;

            &:hover {
                text-decoration: none;
            }
        }
        // Post meta contains post's date, post's categories and tags
        .post-meta {
            max-width:      map-get($main-content, 'max-width');
            font-family:    map-get($font-families, 'post-meta');
            font-size:      $font-size-base;
            color:          white !important;
            font-weight:    400;
            letter-spacing: 0.05em;
            text-shadow:    0 1px 0 rgba(0, 0, 0, 0.9);
            margin:         0 auto;

            a {
                color: white;
            }
        }
    }
}

// Decrease height of cover image
.post-header-cover.post-header-cover--partial {
    height: 60%;
}

.post-header-cover-caption {
    margin: 5px 0 50px 0;
}

// Decrease the font size of the post's title on very small screen
@media #{$xsmall-and-down} {
    .post-header-cover {
        .post-header {
            .post-title {
                font-size: map-get($headings-font-size, h1);
            }
        }
    }
}

// Increase the font size of the post's title on small screen
@media #{$small-only} {
    .post-header-cover {
        .post-header {
            .post-title {
                font-size: map-get($headings-font-size, h1) + 0.5rem;
            }
        }
    }
}

@media #{$small-and-down} {
    .post-header-cover {
        // Display post header cover div in large size
        @include post-header-cover-lg;

        // Push post header cover div from the size of the large sidebar
        &[data-behavior="1"],
        &[data-behavior="2"],
        &[data-behavior="4"],
        &[data-behavior="5"] {
            @include post-header-cover-pushed-lg;
        }
        // Push post header cover div from the size of the medium sidebar
        &[data-behavior="3"],
        &[data-behavior="6"] {
            @include post-header-cover-pushed-md;
        }
    }
}

@media #{$medium-only} {
    // Increase the font size of the post's title on medium screen
    .post-header-cover {
        .post-header {
            .post-title {
                font-size:   map-get($headings-font-size, h1) + 3rem;
                line-height: 1.3em;
            }
        }
        // Display post header cover div in medium size
        &[data-behavior="1"],
        &[data-behavior="2"],
        &[data-behavior="3"] {
            @include post-header-cover-md;
        }
        // Display post header cover div in large size and push it from the size of the large sidebar
        &[data-behavior="4"],
        &[data-behavior="5"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-lg;
        }
        // Display post header cover div in large size and push it from the size of the medium sidebar
        &[data-behavior="6"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-md;
        }
    }
}

@media #{$large-only} {
    // Increase the font size of the post's title on large screen
    .post-header-cover {
        .post-header {
            .post-title {
                font-size:   map-get($headings-font-size, h1) + 3.7rem;
                line-height: 1.3em;
            }
        }
        // Display post header cover div in small size
        &[data-behavior="1"],
        &[data-behavior="2"] {
            @include post-header-cover-sm;
        }
        // Display post header cover div in medium size
        &[data-behavior="3"] {
            @include post-header-cover-md;
        }
        // Display post header cover div in large size and push it from the size of the large sidebar
        &[data-behavior="4"],
        &[data-behavior="5"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-lg;
        }
        // Display post header cover div in large size and push it from the size of the medium sidebar
        &[data-behavior="6"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-md;
        }
    }
}

@media #{$xlarge-and-up} {
    // Increase the font size of the post's title on large screen
    .post-header-cover {
        .post-header {
            .post-title {
                font-size:   map-get($headings-font-size, h1) + 3.7rem;
                line-height: 1.3em;
            }
        }
        // Display post header cover div in extra small size
        &[data-behavior="1"] {
            @include post-header-cover-xs;
        }
        // Display post header cover div in small size
        &[data-behavior="2"] {
            @include post-header-cover-sm;
        }
        // Display post header cover div in medium size
        &[data-behavior="3"] {
            @include post-header-cover-md;
        }
        // Display post header cover div in large size and push it from the size of the large sidebar
        &[data-behavior="4"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-xlg;
        }
        // Display post header cover div in large size and push it from the size of the extra large sidebar
        &[data-behavior="5"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-lg;
        }
        // Display post header cover div in large size and push it from the size of the medium sidebar
        &[data-behavior="6"] {
            @include post-header-cover-lg;
            @include post-header-cover-pushed-md;
        }
    }
}